<script setup>
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { arrHasData } from '/@/utils';
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
});
const emit = defineEmits(['update:modelValue']);
const isShowPicSelector = ref(false);
const picList = computed(() => props.modelValue || []);
const getPic = (pic) => {
	const picListArr = pic.map(({ imgUrl }) => {
		return { src: imgUrl };
	});
	picList.value.push(...picListArr);
	emit('update:modelValue', picList.value);
};
const delPic = (index) => {
	picList.value.splice(index, 1);
	emit('update:modelValue', picList.value);
};

const maxLength = computed(() => (arrHasData(picList.value) ? 5 - picList.value.length : 5));
</script>
<template>
	<div class="ImgSet">
		<div class="btn">
			<el-button type="success" @click="isShowPicSelector = true" size="default">上传图片</el-button>
		</div>
		<div class="film_wrap">
			<div class="row">
				<div class="col img_wrap" v-for="(item, index) in picList" :key="index">
					<div class="img">
						<img :src="item.src" alt="" />
					</div>
					<a href="javascript:;" class="del_btn" @click="delPic(index)">
						<el-icon><CloseBold /></el-icon>
					</a>
				</div>
			</div>
		</div>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="maxLength" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ImgSet {
	padding: 0 5px 10px 5px;
	.film_wrap {
		flex: 1;
		overflow: hidden;

		.row {
			display: flex;
			padding-top: 10px;
			.img_wrap {
				display: flex;
				flex-direction: column;
				position: relative;
				text-align: center;
				box-sizing: border-box;
				padding: 0 6px;
				.img {
					width: 100px;
					height: 100px;
					display: flex;
					justify-content: center;
					img {
						width: 100%;
					}
				}
				.set_main_btn {
					height: 30px;
					a {
						display: none;
						color: var(--el-color-primary);
					}
					.main_item {
						display: inline;
						color: var(--el-color-primary);
					}
				}
				.del_btn {
					position: absolute;
					top: 6px;
					right: 6px;
					display: none;
					color: var(--next-text-color-regular);
					.el-icon {
						color: var(--next-text-color-regular);
					}
					&:hover {
						.el-icon {
							color: var(--el-color-primary);
						}
					}
				}
				&:hover {
					a {
						display: inline;
					}
				}
			}
		}
	}
}
</style>
